<template>
  <div class="pinglun">
    <h3>评论</h3>
    <!-- tag标签 点击回复的时候出现这个东西 留个坑等下回来填-->
     <el-tag
      v-if="tag.name"
      closable

      @close="handleClose()"
      >
      {{tag.name}}
    </el-tag>

 
    <!-- 输入框 -->
    <el-input
      type="textarea"
      autosize
      placeholder="请输入内容"
      show-word-limit
      maxlength="300"
      :rows="2"
      resize="none"
      v-model="textarea"
    ></el-input>

    <!-- 提交位子 -->
   <div class="tijiao">
    <div>
      <el-upload
        :action="$axios.defaults.baseURL+'/upload'"
        name="files"
        list-type="picture-card"
        :on-success="handleSuccess"
        :on-remove="handleRemove"
        ref="upload"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      
    </div>

        <!-- 提交按钮 -->
      <el-row>
        <el-button  type="primary" @click="tijiao">提交</el-button>
      </el-row>
    </div>

    <div  class="guankan" v-if="post[0].comments.length==0">
        <p>
            等待回复
        </p>
    </div>    

    <!-- 评论观看区 -->
    <div class="guankan" v-else>
        <div class="my" v-for="(item,index) in pinlun " :key="index" >
            <p ><img src="http://157.122.54.189:9095/assets/images/avatar.jpg" alt=""> 地球发动机 {{item.updated_at|time}}</p>
            <pinlunFloor class="my_huifu" v-if="item.follow" :post="item.parent"/>
            <p>{{item.content}}</p>
              <p class="huifuBTN" @click="huifuBTN(index,item)">回复</p>
        </div>
       
    </div>


  </div>
</template>



<script>
import moment from 'moment';
import pinlunFloor from './pinlunFloor'
export default {
 props:['post'],
  mounted(){
      this.$axios({
          url:'/posts/comments',
          params:{
              post:this.$route.query.id
          }
      }).then(res=>{
          console.log(res.data.data);
          this.pinlun=res.data.data
      })
  },
  data() {
    return {
    //   input: "",
      textarea: "",  //输入框
       tag: { name: '', type: 'info' },    // 回复@tag标签
      pinlun:[],
      pics:[], //得到上传的图片

     cishu:0
    };
  },

  methods: {
      //图片删除
    handleRemove(file,fileList) {
        console.log(file);
      //得到上传的图片
      this.pics=fileList.map(img=>{
        return  img.response[0]
      })
    },
    //图片上传
    handleSuccess(res, file, fileList) {
        console.log(fileList);
        
      this.pics=fileList.map(img=>{
         return img.response[0]
      })
        // console.log('图片',this.pics); // 暂时未空 等下看看
    },

    //点击上传
    tijiao(){
     
       console.log('父组件传过来的',this.post[0].comments );
       
        //获得 token
        const {token} = this.$store.state.user.userInfo;

        // 获得id
        const {id} = this.$route.query;
           console.log(id);

        // 发布评论参数
    //    console.log(this.textarea);
       
          // 清除现有数据，
      this.$refs.upload.clearFiles();
      this.textarea=''
      this.tag.name=''  
       
        
        this.$axios({
            url:'/comments',
            method:'post',
            
            data:{
                
                 post: id,
                 pics:this.pics,
                 content:this.textarea,
                
            },
            headers: {
            Authorization: "Bearer " + this.$store.state.user.userInfo.token,
            'Content-Type':'application/json'
            }
        }).then(res=>{
            console.log(res);
            
        })  
    },

    huifuBTN(index,nickname){

       this.tag.name='地球发动机';
        this.follow=index;
      // 获取文本域焦点
      // this.$refs.input.focus()
    },
    // 关闭tag标签
    handleClose(){
      this.tag.name='';
      this.follow=''
    },
  },
  filters: {
     time(val) {
      return moment(val).format("YYYY-MM-DD hh:mm");
    }
  },
  components:{
      pinlunFloor
  }
};
</script>

<style lang="less" scoped>
.pinglun {
  width: 660px;
  h3 {
    margin-top: 30px;
    font-weight: 300;
  }
  .tijiao{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
}


.guankan {
    margin-top: 20px;
    width: 660px;
    border: 1px solid #ccc;
    padding-bottom: 20px;
    // height: 999px;
    .my{
       
       border-bottom: 1px  dashed #ccc;
        padding: 20px 20px 5px 20px;
        padding-bottom: 20px;
        img{
            width: 16px;
            height: 16px;   
            border-radius: 50%;
        }
        .my_huifu{
            margin: 10px 0 ;
        }
        .huifuBTN{
          float: right;
       
          
        }
    }
    
}
</style>